//多选展示结果

import { ref } from 'vue';
import { useQuasar } from '@teld/q-components';

//展示结果
/**
 * @单选多选
 * @展示类型
 *
 */

export const useDisplayingResults = (mappingProps, emit) => {
  const selectPreview = ref(); //预览
  const delayTime = ref(); //延迟时间
  const $q = useQuasar();
  const generateMutiDisplayingResults = _filter => {
    let Template = [];
    if (_filter.length > 0) {
      _filter.forEach((item, index) => {
        if (mappingProps.isSingle && index > 1) return;
        if (!item.Name) return;
        Template.push(
          <span
            class={
              mappingProps.readonly
                ? 'select_helper_tag select_helper_tag_readonly select_tree_helper_result'
                : 'select_helper_tag select_tree_helper_result'
            }
          >
            {item.Name}
            {(() => {
              if ($q.screen.xs || $q.platform.is.mobile) {
                return '';
              }
              if (
                index == _filter.length - 1 ||
                (mappingProps.isSingle && index)
              ) {
                return <i></i>;
              } else {
                return <i>,</i>;
              }
            })()}
            {(() => {
              if (!mappingProps.mappingProps.readonly) {
                return (
                  <t-button
                    style={
                      $q.screen.xs || $q.platform.is.mobile
                        ? 'font-size:8px;margin-top:-2px;display:inline-flex !important'
                        : 'font-size:8px;margin-top:-2px;'
                    }
                    flat
                    round
                    dense
                    icon='clear'
                    onClick={e => {
                      let value = mappingProps.mappingProps.value;
                      value.splice ? value.splice(index, 1) : [];
                      emit('update:value', value);
                      emit('confirm', value);
                      // e.stopPropagation()
                      // e.preventDefault()
                      // return false
                    }}
                  />
                );
              }
            })()}
          </span>,
        );
      });
      if (
        mappingProps.multiple &&
        mappingProps.isSingle &&
        _filter.length > 2
      ) {
        Template.push(
          <span
            class='select_helper_tag'
            onMouseenter={() => {
              if (delayTime.value) {
                window.clearTimeout(delayTime.value);
                delayTime.value = null;
              }
              selectPreview.value.show();
            }}
            onMouseleave={() => {
              if (!delayTime.value) {
                delayTime.value = window.setTimeout(() => {
                  selectPreview.value.hide();
                }, 300);
              }
            }}
          >
            {'等' +
              _filter.length +
              (mappingProps.unit ? mappingProps.unit : '')}
            <t-menu
              ref={selectPreview}
              class='select_helper_popup'
              maxHeight='300px'
            >
              <t-card
                style='max-width:300px'
                onMouseenter={() => {
                  if (delayTime.value) {
                    window.clearTimeout(delayTime.value);
                    delayTime.value = null;
                  }
                }}
                onMouseleave={() => {
                  if (!delayTime.value) {
                    delayTime.value = window.setTimeout(() => {
                      selectPreview.value.hide();
                    }, 300);
                  }
                }}
              >
                <t-card-section>
                  {(() => {
                    let Template = [];
                    _filter.forEach((item, index) => {
                      Template.push(
                        <span class='select_helper_tag select_tree_helper_result'>
                          {item.Name}
                          {() => {
                            if (!mappingProps.mappingProps.readonly) {
                              return (
                                <t-button
                                  style={
                                    $q.screen.xs || $q.platform.is.mobile
                                      ? 'font-size:8px;margin-top:-2px;display:inline-flex !important'
                                      : 'font-size:8px;margin-top:-2px;'
                                  }
                                  flat
                                  round
                                  dense
                                  icon='clear'
                                  onClick={e => {
                                    let value = mappingProps.mappingProps.value;
                                    value.splice ? value.splice(index, 1) : [];
                                    emit('update:value', value);
                                    emit('confirm', value);
                                  }}
                                />
                              );
                            }
                          }}
                        </span>,
                      );
                    });
                    return Template;
                  })()}
                </t-card-section>
              </t-card>
            </t-menu>
          </span>,
        );
      }
    }

    return Template;
  };
  //多选
  const multipleDisplayingResults = () => {
    if (mappingProps.displayingResults.value) {
      return generateMutiDisplayingResults(
        mappingProps.displayingResults.value,
      );
    } else {
      return null;
    }
  };
  //单选
  const singleDisplayingResults = () => {
    if (!mappingProps.displayingResults.value) return null;
    return (
      <div
        style={`max-width: calc(100% - 60px);display: flex;align-items: center;`}
        class={'select_tree_helper_result'}
        onClick={e => {
          e.stopPropagation();
          e.stopPropagation();
          return false;
        }}
      >
        <span
          title={mappingProps.displayingResults.value}
          style={`
      flex:1 1 auto;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
     font-size:14px`}
        >
          {mappingProps.displayingResults.value}
        </span>
        <i></i>
        {(() => {
          if (mappingProps.mappingProps.readonly) return '';
          return (
            <t-button
              style={
                $q.screen.xs || $q.platform.is.mobile
                  ? 'font-size:8px;margin-top:-2px;display:inline-flex !important'
                  : 'font-size:8px;margin-top:-2px;'
              }
              flat
              round
              dense
              icon='clear'
              onClick={() => {
                if (mappingProps.mappingProps.responseRelationNode == 2) {
                  let customResults_result =
                    mappingProps.mappingProps.customResults_result &&
                    mappingProps.mappingProps.customResults_result
                      ? JSON.parse(
                          mappingProps.mappingProps.customResults_result,
                        )
                      : {};
                  customResults_result?.dataSource.map(item => {
                    let Value = null;
                    let clearValue = new Function(
                      'element',
                      `with(element){
                  debugger
              return element.${item.Value}=''
           }`,
                    );
                    clearValue({LocalVars: mappingProps.localvars });
                  });
                }
                mappingProps.clear();
              }}
            />
          );
        })()}
      </div>
    );
  };
  if (mappingProps.multiple) {
    return multipleDisplayingResults();
  } else {
    return singleDisplayingResults();
  }
};
const isFocus = ref(false);
export const useGenerateInput = mappingProps => {
  console.log(mappingProps.placeholder);
  if (
    ((mappingProps.mappingProps.readonly ||
      mappingProps.mappingProps.readOnly) &&
      !mappingProps.fieldValue.value) ||
    !(mappingProps.mappingProps.readonly || mappingProps.mappingProps.readOnly)
  ) {
    return (
      <input
        class='select_tree_helper_input'
        ref={mappingProps.select_tree_helper_input}
        style={
          ((mappingProps.multiple && mappingProps.isSingle
            ? 'min-width:0;'
            : '') +
          (mappingProps.mappingProps.readonly ||
            mappingProps.mappingProps.readOnly)
            ? 'background:rgba(0,0,0,0);'
            : '') +
          'height:24px;margin-bottom:1px;border:0;outline:0;height: 26px;line-height: 26px; width:100%;font-size:14px;   flex: 1;min-width:10px;'
        }
        tabindex={mappingProps.tabindex ? mappingProps.tabindex : 0}
        readonly={
          mappingProps.mappingProps.readonly ||
          mappingProps.mappingProps.readOnly
        }
        v-model={mappingProps.filter.value}
        placeholder={
          (mappingProps.displayingResults.value &&
            !mappingProps.isOpen.value &&
            !isFocus.value) ||
          mappingProps.mappingProps.readonly ||
          mappingProps.mappingProps.readOnly
            ? ''
            : mappingProps.mappingProps.placeholder
        }
        onFocus={mappingProps.InputFocus}
        onClick={mappingProps.InputFocus}
        onFocusin={e => {
          e.stopPropagation();
          e.stopPropagation();
          isFocus.value = true;
          return false;
        }}
        onFocusout={e => {
          e.stopPropagation();
          e.stopPropagation();
          isFocus.value = false;
          return false;
        }}
        onKeydown={(event) => {
          if (event.key === 'Enter') {
            event.preventDefault();
            // 这里可以添加你的自定义逻辑
          }
        }}
      />
    );
  } else {
    return null;
  }
};

